<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <script src="./jQuery.js"></script>
    <script src="./js.js"></script>
    <title>轮播图</title>
    <style type="text/css">
*{
    padding:0px;
    margin:0px;
    border:0px;
}
li{
    list-style-type:none;
}
a{
    text-decoration:none;
}
#wrapper{
    margin:0px auto;
    border:0px;
    padding:0px;
}
#show-area{
    width:961px;
    height:450px;
    position:relative;
    margin:0px auto;
    overflow:hidden;
}
#show-area ul{
    position:relative;
    width:4800px;
    height:450px;
    right:0;
}
#show-area ul li{
    float:left;
    width:452px;
}



</style>
</head>
<body>
    
        <div class="banner-wrap">
                <!-- <div class="bg"></div> -->
                <div class="banner container">
                    <div class="banner-img">
                            <ul class="sol_ul">
           
                                    <li class="sol_1 active mySlides fade" index="0">
                                        <div class="sol_left">
                                            <img src="./yaoshi_1.png">
                                        </div>
                                        <div class="sol_right">
                                            <p>
                                                <img src="./yaoshi_1a.png">
                                            </p>
                                            <br>
                                            <h2>全国执业药师资格考试用书</h2>
                                            <dd>
                                                <a>注册试听免费课程</a>
                                            </dd>
                                            <dt>
                                              <a class="dt_a1">电子教案下载</a>
                                              <a class="dt_a2">在线购买</a>
                                              <a class="dt_a3">讲义下载</a>
                                            </dt>
                                        </div>
                                    </li>
                                    <li class="sol_2 mySlides fade" index="1">
                                        <div class="sol_left">
                                            <img src="./yaoshi_2.png">
                                        </div>
                                        <div class="sol_right">
                                            <p>
                                                <img src="./yaoshi_2a.png">
                                            </p>
                                            <br>
                                            <h2>全国执业药师资格考试用书</h2>
                                            <dd>
                                                <a>注册试听免费课程</a>
                                            </dd>
                                            <dt>
                                                <a class="dt_a1">电子教案下载</a>
                                                <a class="dt_a2">在线购买</a>
                                                <a class="dt_a3">讲义下载</a>
                                            </dt>
                                        </div>
                                    </li>
                                    <li class="sol_3 mySlides fade" index="2">
                                        <div class="sol_left">
                                            <img src="./yaoshi_3.png">
                                        </div>
                                        <div class="sol_right">
                                            <p>
                                                <img src="./yaoshi_3a.png">
                                            </p>
                                            <br>
                                            <h2>全国执业药师资格考试用书</h2>
                                            <dd>
                                                <a>注册试听免费课程</a>
                                            </dd>
                                            <dt>
                                              <a class="dt_a1">电子教案下载</a>
                                              <a class="dt_a2">在线购买</a>
                                              <a class="dt_a3">讲义下载</a>
                                            </dt>
                                        </div>
                                    </li>
                                    <li class="sol_4 mySlides fade" index="3">
                                        <div class="sol_left">
                                            <img src="./yaoshi_4.png">
                                        </div>
                                        <div class="sol_right">
                                            <p>
                                                <img src="./yaoshi_4a.png">
                                            </p>
                                            <br>
                                            <h2>全国执业药师资格考试用书</h2>
                                            <dd>
                                                <a>注册试听免费课程</a>
                                            </dd>
                                            <dt>
                                              <a class="dt_a1">电子教案下载</a>
                                              <a class="dt_a2">在线购买</a>
                                              <a class="dt_a3">讲义下载</a>
                                            </dt>
                                        </div>
                                    </li>
                                   
                                 </ul>
                    </div>
                    <div style="text-align:center">
                            <span class="dot" index="0">
                                <img src="./yaoshi_1a.png">
                            </span>
                            <span class="dot" index="1">
                                    <img src="./yaoshi_2a.png">

                            </span>
                            <span class="dot" index="2">
                                    <img src="./yaoshi_3a.png">

                            </span>
                            <span class="dot" index="3">
                                    <img src="./yaoshi_4a.png">

                            </span>
                        </div>
                    <div class="control" style="background-color: rgba(136, 33, 72, 0.8);">
                        
                        
                    </div>
                </div>
            </div>
<script type="text/javascript">
$(function(){
    var current = 0;
    var timeId;
    var len = $(".mySlides").length;

    function render(num) {

        // $(".mySlides").hide();
        $(".mySlides").removeClass("active");

        // $(".mySlides[index=" + num + "]").show();
        $(".mySlides[index=" + num + "]").addClass("active");

        $(".dot").removeClass("active");
        $(".dot[index=" + num + "]").addClass("active");
        intervalChange();
    }

    function renderCircle(e) {


    }
    function intervalChange() {
        var len = $('.mySlides').length;

        clearInterval(timeId);
        timeId = setInterval(function () {

            current++;
            // current--;
            if (current >= len) {
                current = 0;
                // render(current)
            }

            render(current);
        }, 5000)
        // current++;

        // current = current-1;
        console.log(current)
    }


    render(0);
    $(".banner .btn a:eq(1)").on("click", function () {
        var len = $(".mySlides").length;

        if(current < (len-1)){
            current = current + 1;
            console.log(current);
            render(current);
        }else {
            // render(len-1)
        }



})

$(".banner .btn a:eq(0)").on("click", function () {

    if(current > 0){
        current = current-1;
        console.log(current);
        render(current);
    }else{
        // render(0)
    }

})
$(".dot").on("click", function () {
    var $this = $(this),
        t = $this.attr("index");
    // current = t;
    render(t)
    current = t;

})


})



    </script>
</body>
</html>